<template>
  <view class="bottom-box" :style="{paddingBottom:safeBottom,}">
    <slot>
      <button class="button-btn" @click="handle(1)">{{text}}</button>
    </slot>
  </view>
</template>

<script>
  import {
    mapGetters
  } from 'vuex';
  export default {
    data() {
      return {};
    },
    props: {
      text: {
        type: String,
        default: "按钮",
      },
    },

    computed: {
      ...mapGetters(['systemInfo']),
      safeBottom() {
        let safeAreaInsets = this.systemInfo.safeAreaInsets;
        let bottom = 10
        if (safeAreaInsets) bottom = safeAreaInsets.bottom + 6;
        return bottom + 'px'
      }
    },
    methods: {
      handle(e) {
        this.$emit('onClick', e)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .bottom-box {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
    padding-top: 6px;
    padding-right: 15px;
    padding-left: 15px;
    box-shadow: 0px -2px 1px 0px #F6F7F8;
    z-index: 99;

    .button-btn {
      display: block;
      background: linear-gradient(90deg, #FF9900 0%, #FF8400 100%);
      border-radius: 22px;
      font-size: 16px;
      height: 44px;
      line-height: 44px;
      color: #fff;
      width: 100%;
    }
  }
</style>